<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      layout:decorator="layout/m_master">

<div layout:fragment="content">
    <div class="page-group">
        <div class="page page_manage_setup">
            <div th:replace="layout/m_layout::title('修改手机号')"></div>
            <div class="page-content">

                <form action="" bottlecms-form-ajax="" method="post">
                    <input type="hidden" name="_token" value="YxPQPonbrSMGBeufbRimgmyXtqnXTd8u79uw8eLb">
                    <input type="hidden" name="_method" value="PUT">
                    <div class="bcui-form newformbox">
                        <div class="form-item">
                            <input bottlecms-input="" type="text" name="mobile" value="" placeholder="请输入您的手机号" class="">
                        </div>
                        <div class="form-item ub">
                            <input bottlecms-input="" type="number" name="smsyzm" value="" placeholder="验证码" class="ub-f1" maxlength="6" style=" margin-right:20px;">
                            <div class="ub ub-ac">
                                <button class="btn btn-warning btn-sm sendSms" type="button">
                                    发送验证码
                                </button>
                            </div>
                        </div>
                        <div class="form-item">
                            <button class="btn  form-submit" type="submit">
                                确认提交
                            </button>
                        </div>
                    </div>
                </form>

            </div>

        </div>
    </div>
    <div th:replace="layout/m_layout::systemJs"></div>
    <script type="text/javascript">
        var _page = $('.page');


        // 发送验证码
        $(_page).on('click', '.sendSms', function() {
            var _this = this;
            if ($(_this).hasClass("off")) return;
            var mobile = $(_page).find("input[name='mobile']").val();
            // if (mobile.length != 11) return bottlecms.toast("请输入正确手机号");
            $(_this).addClass("off").text("发送中…");
            var timer = null;
            bottlecms.post(BOTTLECMS_MOBILE_PATH + "manage/user_mobile/sendsmscode", {
                mobile: mobile
            }, function(data) {
                if (data.success == true) {
                    clearInterval(timer); //这句话至关重要
                    var time = 60;
                    timer = setInterval(function() {
                        if (time <= 0) {
                            clearInterval(timer);
                            $(_this).hasClass("off") && $(_this).removeClass("off").text("发送验证码");
                        } else {
                            $(_this).addClass("off").text("重新发送(" + time + ")");
                            time--;
                        }
                    }, 1000);
                } else {
                    bottlecms.toast(data.msg);
                    $(_this).hasClass("off") && $(_this).removeClass("off").text("发送验证码");
                }
            })
        });

    </script>
</div>
</html>
